<script setup>

import {ref, computed, onMounted, watch} from "vue";
import {Edit} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import UpdateRotaDialog from "@/components/admin/updateRotaDialog.vue";

import {usePublicStore} from "@/stores/PublicStores.js";
const publicStore = usePublicStore();
const {getRota} = publicStore
import {useAdminStore} from "@/stores/AdminStores.js";
const adminStore = useAdminStore();
const {updateRotaStore} = adminStore

const key = ref('')
const power = ref('')
const rota = ref(null)

const props = defineProps(['keyProps', 'powerProps'])
watch(props, (val) => {
  key.value = val.keyProps
  power.value = val.powerProps
})
watch(key, (val) => {
  getRota(val, (data) => {
    rota.value = data
  })
})

const classHour = ['第一、二节课', '第三、四节课', '第五、六节课', '第七、八节课', '第九、十节课'];

const columns = ["值班表", "星期一", "星期二", "星期三", "星期四", "星期五"].map((label, idx) => ({
  label,
  prop: label,
  width: !idx ? 150 : void 0
}))

const data = computed(() => {
  return (rota.value ?? []).map((item, index) => {
    return {
      '值班表': classHour[index],
      '星期一': item[0],
      '星期二': item[1],
      '星期三': item[2],
      '星期四': item[3],
      '星期五': item[4]
    }
  })
});

onMounted(() => {
  key.value = props.keyProps
  power.value = props.powerProps
  if (!rota.value && !props.keyProps) {
    ElMessage.warning("请选择一个值班表密钥")
  }
})

const updateRotaData = ref({
  key: '',
  x: 0,
  y: 0,
  names: '',
  rota: null
})
const updateRota = (key, x, y, names) => {
  if (power.value === 'admin') {
    updateRotaData.value = {key, x, y, names, rota: rota.value}
  }
}

const yseUpdateRota = (endData) => {
  updateRotaStore(endData, () => {
    getRota(endData.key, (data) => {
      rota.value = data
    })
  })
}
</script>

<template>
  <div>
    <el-table :data="data" border stripe v-if="!!rota">
      <template v-for="(item, idx) in columns" :key="item.label">
        <el-table-column align="center" :label="item.label" :prop="item.prop" :width="item.width" show-overflow-tooltip>
          <template #default="{ row, $index }">
            <template v-if="item.prop !== columns[0].prop">
              <update-rota-dialog :updateRotaDataProps="updateRotaData" :powerProps="power" @yes-update-rota-emit="(endData) => {yseUpdateRota(endData)}">
                <template #default="props">
                  <el-button v-bind="props"
                             link
                             @click="updateRota(key, $index, idx - 1, row[item.prop])">
                    <el-icon v-if="power === 'admin'">
                      <Edit/>
                    </el-icon>
                    <template v-if="row[item.prop].length === 0">无人值班</template>
                    <template v-else>{{ row[item.prop].join("、") }}</template>
                  </el-button>
                </template>
              </update-rota-dialog>
            </template>
            <template v-else>
              {{ row[item.prop] }}
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div v-else>
      <el-empty description="暂无值班表数据"/>
    </div>
  </div>
</template>

<style scoped>

</style>